<template>
    <view class="classList">
        <view class="loadingLayout" v-if="!classList.length && !noData">
            <uni-load-more status="loading"></uni-load-more>
        </view>
        <view class="content">
            <navigator url="/pages/preview/preview" class="item"
                       v-for="item in classList"
                       :key="item._id">
                <image :src="item.smallPicurl" mode="aspectFill"></image>
            </navigator>
        </view>
        <view class="loadingLayout" v-if="classList.length ||noData">
            <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
        </view>
        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script setup>
import {ref} from "vue"
import {onLoad,onReachBottom} from "@dcloudio/uni-app";
import {apiGetClassList} from "@/api/apis.js";
// 获取分类列表数据
const classList = ref([])
const noData = ref(false)//触底是否有数据

//定义data参数
const queryParams={
    pageNum:1,
    pageSize:12,
}
onLoad((e)=>{
    let {id=null,name=null} = e
    queryParams.classid = id
    //修改导航标题
    uni.setNavigationBarTitle({
        title:name
        })
    //执行获取分类列表数据
    getClassList()
})
//触底加载更多
onReachBottom(()=>{
    if(noData.value) return//变为true了就不再触底加载了
    queryParams.pageNum++
    getClassList()
})
const getClassList = async () => {
    let res = await apiGetClassList(queryParams)
    classList.value = [...classList.value, ...res.data]//合并数组
    if(queryParams.pageSize > res.data.length) noData.value = true//触底没有数据了
    uni.setStorageSync("storeClassList",classList.value)//缓存数据
}
</script>


<style scoped lang="scss">
.classList {
    .content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5rpx;
        padding: 5rpx;

        .item {
            height: 440rpx;

            image {
                width: 100%;
                height: 100%;
                display: block; //块级元素
            }
        }
    }
}
</style>
